<?php 
	$graph_data = $this->graph_data;
?>

<section class="grid_12"> <!-- pagination table -->
	<!-- 検索フォーム -->
	<div class="block-border">
    	<div class="block-content">
	        <h1>統計</h1>
	       <form method="get" class="form" action="/admin/stactatics" id="stactatics-form">
	        	<p>
        			<label for="start_time" class="inline">スタート月</label>
		        	<?php echo $this->formText("start_time", $this->start_time, array('class'=>'date-picker','readonly'=>"true"))?>
		        	
		        	<label for="end_time" class="inline">エンド月</label>
		        	<?php echo $this->formText("end_time", $this->end_time, array('class'=>'date-picker', "readonly"=>"true"))?>
		        	
		        	<button type="submit" id="save_btn">統計</button>
		        </p>
	        </form>
    	</div>
	</div>
</section>

<section class="grid_12">
	<div class="block-border" style="margin-bottom: 20px;">
    	<div class="block-content">
    		<h1>グラフ</h1>
			<div id="container" style="width: 95%; height: auto; margin: 0 auto"></div>
    	</div>
    </div>
</section>

<!-- グラフ作成 -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			zoomType: 'xy'
		},
		title: {
			text: '予約統計'
		},
		subtitle: {
			text: '収入統計'
		},
		xAxis: [{
			categories: <?php echo $graph_data['categories']?>
		}],
		yAxis: [{
			labels: {
				formatter: function() {
					return this.value +' VND';
				},
				style: {
					color: '#4572A7'
				}
			},
			title: {
				text: '収入',
				style: {
					color: '#4572A7'
				}
			}
		}],
		tooltip: {
			formatter: function() {
				return ''+
					this.x +': '+ this.y + "VND";
			}
		},
		series: [{
			name: '実績',
			color: '#4572A7',
			type: 'column',
			yAxis: 0,
			data: <?php echo $graph_data['total_money']?>

		},{
			name: '課徴',
			color: '#AA4643',
			type: 'column',
			yAxis: 0,
			data: <?php echo $graph_data['total_fee']?>
		
		}, {
			name: '収入',
			color: '#89A54E',
			type: 'spline',
			yAxis: 0,
			data: <?php echo $graph_data['total']?>
		}]
	});
});
</script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<script type="text/javascript" src="/js/modules/exporting.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('.date-picker').datepicker( {
	        changeMonth: true,
	        changeYear: true,
	        dateFormat: 'yy-mm',
	        showOn: "button",
			buttonImage: "/images/icons/calendar.gif",
			buttonImageOnly: true,
			monthNamesShort : ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
			yearRange: 'c-1:c',
			maxDate: '+0m +0w',
			minDate: '-12m +0w',
			showButtonPanel: true,
			showMonthAfterYear: true,
			currentText: '今月',
			closeText: '選択',
	        onClose: function(dateText, inst) { 
	            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
	            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
	            $(this).datepicker('setDate', new Date(year, month, 1));
	        }
	    });

		$("#stactatics-form").submit(function(){
			if(!checkTime(true))
				return false;
		});

		$("html, body").animate({scrollTop: $("#status-bar").offset().top}, "slow");
	});

	function checkTime(){
		var start_time = $("#start_time").val();
		var end_time = $("#end_time").val();

		//TODO: check time empty
		if(start_time == "" || end_time == ""){
			openTimeEmptyDialog();
			return false;
		}

		//TODO: check time valid
		if(start_time >= end_time){
			openTimeErrDialog();
			return false;		
		}
		
		return true;
	}
	
	function openTimeEmptyDialog()
	{
		$.modal({
			content: $("#time-empty-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	function openTimeErrDialog()
	{
		$.modal({
			content: $("#time-err-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}
</script>

<style>
	.ui-datepicker-calendar {
	    display: none;
	    }
</style>

<div id="time-empty-msg" style="display:none">
	<h3>スタート時間とエンド時間を全部選択しなければなりません。</h3>
</div>

<div id="time-err-msg" style="display:none">
	<h3>エンド時間はスタート時間の前です。</h3>
</div>